<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小型建表工具</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <meta name="renderer" content="webkit">

    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="{{assets}}i/favicon.png">

    <meta name="mobile-web-app-capable" content="yes">

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/canvasjs/1.4.1/canvas.min.js"></script>
    <!-- <script type="text/javascript" src="/js/drag.js"></script> -->
    <script type="text/javascript" src="/js/eerai.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/css/dragdealer.css">
    <script src="/js/dragdealer.js"></script>
    <script src="/js/BigDecimal.min.js"></script>
    <script src="/js/include.js" type="text/javascript" charset="utf-8"></script>
<!--    <script src="/js/layer.js"></script>-->
    <style>

        #cover_content{position:absolute;
            height: 30px!important;    margin-top: -10px; border-radius: 20px}
        #conver_repair{position:absolute;left:0px;top:100px;cursor: pointer;}
        #canvas_whole {
            position: absolute;
            top: -150px;
        }
        #conver_repair {
            margin-top: -150px;
        }

        .login {
            height: 210px;
            width: 300px;
            padding: 20px;
            border-radius: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            z-index: 9;
        }
        .login h1 {
            text-align: center;
            color: #fff;
            font-size: 24px;
            margin-bottom: 20px;
        }
        .login_btn {
            width: 100%;
        }
        #chongshi,input{
            color: #ffffff;
            text-shadow: 0px 0px 8px #333;
            letter-spacing: 1px;
        }
        /*input::-webkit-input-placeholder{*/
            /*color: #ffffff;*/

            /*font-size: 14px;*/
            /*text-shadow: 0px 0px 3px #000;}*/
        input:-webkit-autofill { box-shadow: 0 0 0px 1000px #ffffff inset;}
        .video-player {
            background-color: transparent;
            display: block;
            position: absolute;
            z-index: 1;
            top: 0;
        }
        h1 {
            text-shadow: 0px 0px 8px #333;
            letter-spacing: 3px;
        }
        ::-webkit-input-placeholder{
            color: #ffffff;

            font-size: 14px;
            text-shadow: 0px 0px 3px #000;}
        ::-moz-placeholder{
            color: #ffffff;
            letter-spacing: 2px;
            font-size: 14px;
            text-shadow: 0px 0px 5px #000;}
        ::-ms-placeholder{
            color: #ffffff;
            letter-spacing: 2px;
            font-size: 14px;
            text-shadow: 0px 0px 5px #000;}
         ::-webkit-input-placeholder{
             color: #ffffff;
             letter-spacing: 2px;
             font-size: 14px;
             text-shadow: 0px 0px 5px #000;}
         ::-moz-placeholder{color: #ffffff;
             letter-spacing: 2px;
             font-size: 14px;
             text-shadow: 0px 0px 5px #000;}
         ::-ms-placeholder{color: #ffffff;
             letter-spacing: 2px;
             font-size: 14px;text-shadow: 0px 0px 5px #000;}
    </style>
</head>
<body style="background-color: rgba(0, 0, 0, .6)">
<!--视频背景-->
<!--<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080" data-width="1920" height="1080" width="1920">-->
<!--<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" width="100%" height="100%" style="object-fit: cover;">-->
    <!--<source src="http://cdn.moji.com/websrc/video/video1013.mp4" type="video/mp4">-->
<!--</video>-->
<!--图片背景-->
<!--<img src="/img/login2.jpg" style="width: 100%;height:100%;position: fixed;">-->
<div class="login">
    <h1>DBM-数据库管理系统</h1>
    <form class="layui-form" autocomplete="off">
        <div class="layui-form-item">
            <input class="layui-input" style="background-color: transparent;" id="usercode" name="usercode" placeholder="用户名" lay-verify="required" type="text" autocomplete="new-password">
        </div>
        <div class="layui-form-item">
            <input class="layui-input" style="background-color: transparent;" id="password" name="password" placeholder="密码" lay-verify="required" type="password" autocomplete="new-password">
        </div>
        <!--<h1>不给你滑了</h1>-->
        <div id="cover_content">

        </div>
        <a  id="chongshi" style="display:none;width:100%;position: relative;text-align: center;cursor:pointer;z-index: 99" onclick="window.location.reload()">请点击重试</a>
    </form>
</div>

<script>
    $(function(){
        layui.use(['layer'], function(){
            new eerai("/cms/slide_verify/i");
        });
    });
    //提交登录
    function  loginBtn(){//提交登录

        var usercode = $('#usercode').val(),
                passWord = $('#password').val();
        var json = {
            'usercode':usercode,
            'password':passWord
        }
        $.ajax({
            type: "post",
            url: "/cms/user/login",
            data: json,
            dataType: "json",
            success: function(data){
                if(data.success){
                    console.log("登录用户",JSON.stringify(data.data));
                    $.cookie("META-COOKIE", JSON.stringify(data.data), { path : '/'});
                    layer.msg('登录成功',{time:1000},function(){
                        window.location.href = 'index.html';
                    });
                } else {
                    $(".allqq").hide();
                    $("#slider").hide();
                    layer.msg(data.message);
                    $("#chongshi").css("display","inline-block");
                }
            }
        });
    };

    function  verify(data){//验证滑动是否成功
        $.post("/cms/slide_verify/verify",data,function(result){
            if(result.success){
                loginBtn();
            }else {
                $(".allqq").hide();
                $("#slider").hide();
                layer.msg(result.message)
                $("#chongshi").css("display","inline-block");

            }
        });
    };
</script>
</body>
</html>